@import "../utils";

.rio-link {
    pointer-events: auto;
    cursor: pointer;

    display: block;

    &.rio-text-link {
        color: var(--rio-local-level-2-bg);

        // Apply global text styles
        font-size: var(--rio-global-text-font-size);
        font-weight: var(--rio-global-text-font-weight);
        font-family: var(--rio-global-text-font-family);

        white-space: nowrap;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    &:not(.rio-text-link) {
        @include single-container();
    }
}

.rio-text-link-icon {
    // NOT rem! Scale off the current text size.
    width: 1em;
    height: 1em;

    max-width: 1em;
    max-height: 1em;

    margin-right: 0.3em;
}

.rio-link:not(.rio-text-link) {
    // Remove the underline. For some reason it's necessary to set this on the
    // link even though our text has its own `text-decoration` setting anyway
    text-decoration: none;
}
